<template>
  <div>
    <h1 class="title">收藏记录</h1>
    <div v-if="list.length == 0"><el-empty description="暂无数据" /></div>
    <div
      class="video-card__list w-full grid gap-x-7 gap-y-8 grid-cols-[repeat(4,minmax(245px,1fr))] mt-12"
      v-else
    >
      <div v-for="item in list" :key="item.id">
        <ItemImg :item="item"></ItemImg>
      </div>
    </div>

    <div style="margin-top: 50px">
      <Pagination
        class="pagination"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="totalItems"
        @update:current-page="currentPage = $event"
        @update:page-size="pageSize = $event"
        @change="loadData(temparam)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import Pagination from "@/components/Pagination.vue";
import { materialListModel } from "@/common/utils/homeTpye";
import { getCollectList } from "@/common/userApi";
import ItemImg from "@/components/ItemImg.vue";

// 获取数据
const list = ref<materialListModel[] | any>([]);
let currentPage = ref(1);
let pageSize = ref(5);
let totalItems = ref(0); // 假设总数为100
// 加载数据的逻辑
let temparam = reactive({
  pageNum: currentPage.value,
  pageSize: pageSize.value,
});
function loadData(data?: any) {
  // console.log("232323");
  window.scrollTo(0, 0);
  getCollectList(data).then((res) => {
    // console.log(res);
    const tempTotal = res.total + "";
    totalItems.value = parseInt(tempTotal);
    list.value = res.rows;
  });
}
loadData(temparam);
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bold;
  // padding: 10px 0 30px;
  margin-bottom: 20px;
}
</style>
